page-study-list{
  .study-list-header{
    position: relative;
    z-index: 13;
    .toolbar-background{
      background: #fff;
      border-bottom: 1px solid #e1e1e1;
    }
    .show-class-modal{
      ion-icon{
        transform: rotate(180deg);
        transform-origin: 50% 50%;
      }
    }
    .class-type-modal{
      position: absolute;
      width:100%;
      background: #fff;
      box-shadow: 0 4px 8px rgba(0,0,0,.1);
      // top: 100%;
      .class-type-item{
        border-bottom: 1px solid #ccc;
        .class-type-title{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding:0 10px;
          // border-bottom: 1px solid #e1e1e1;
          h4{
            margin:0;
            padding:0;
            font-size: 15px;
            font-weight: 500;
            // height: 36px;
            line-height: 36px;
          }
          ion-icon{
            color:#F65F47;
          }
        }
        .class-type-sub-list{
          // padding:10px;
          display: flex;
          height: 0;
          overflow: hidden;
          .class-type-sub-item{
            margin:4px 10px 4px 0;
            background:#F0F0F2;
            color:#666;
            height: 24px;
            line-height: 24px;
            padding:0 10px;
            border-radius: 2px;
          }
          .selected{
            background:#F65F47;
            color:#fff;
          }
        }
      }
      .expand{
        .class-type-title{
          border-bottom: 1px solid #e1e1e1;
        }
        .class-type-sub-list{
          height: auto;
          padding:10px;
        }
        ion-icon{
          transform: rotate(180deg);
          transform-origin: 50% 50%;
        }
      }
    }
  }
  .navbar-btn{
    min-width:36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background: none;
  }
  .navbar-btn-back{
    width:36px;
    color:#F65F47;
  }
  .navbar-btn-more{
    margin-left: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    span{
      margin-right: 4px;
    }
  }
  .back-button-ios{
    width:36px;
    color:#F65F47;
  }

  .search-bar-container{
      // padding:4px 10px;
      position: relative;
      height: 28px;
      overflow: hidden;
      .search-icon{
          position: absolute;
          top:-1px;
          width:26px;
          height: 100%;
          line-height: 28px;
          text-align: center;
          color:#999;
          font-size: 16px;
          // background:url("../assets/img/common/search@3x.png") no-repeat center center;
          background-size: 14px auto;
          z-index: 9;
          // background-color: pink;
      }
      .close-icon{
        right: 0;
      }
      ion-select{
          position: absolute;
          left: 26px;
          top: 0;
          z-index: 99;
          background:#ccc;
          border-radius: 4px;
          padding:4px 10px;
          line-height: 20px;
          transform: scale3d(.76,.76,1);
          transform-origin: 0 50%;
      }
      .search-page-link,input{
          display: block;
          width:100%;
          padding-left: 26px;
          background:#eaebed;
          height: 28px;
          line-height: 28px;
          border-radius: 4px;
          font-size: 13px;
          margin:0;
      }
      // .search-page-link{
      //     line-height: 28px;
      // }
  }

  .search-input-bar {
      input{
          padding-left: 80px;
      }
  }

  .study-list{
    padding-top: 10px;
    .study-item{
      height: auto;
    }
    .study-item-container{
      position: relative;
      margin-bottom: 10px;
      min-height: 100px;
      .container-img{
        width:100%;
      }
      .container-mask{
        position: absolute;
        left: 0;
        top: 0;
        right:0;
        bottom: 0;
        background: rgba(0,0,0,.3);
        color:#fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding:10px;
        .mask-top{
          display: flex;
          flex-direction: row-reverse;
          align-items: top;
          // justify-content: space-between;
        }
        .study-title{
          // text-align: left;
          // flex-shrink: 1;
          // flex-grow: 1;
          flex:1 1 auto;
          font-size: 15px;
          font-weight: 500;
        }
        .study-price{
          // flex-shrink: 0;
          // flex-grow: 0;
          flex: 0 0 auto;
          padding-left: 20px;
          text-align: right;
          .vip-price{
            .price-tag{
              display: inline-block;
              padding:0 10px;
              line-height: 26px;
              text-align: center;
              background:#F65F47;
              border-radius: 15px;
              font-size: 13px;
              margin-top: 10px;
            }
          }
        }
      }

    }
  }

  .common-toolbar-footer{
    padding:0;
    // height: 50px;
    border-top: 1px solid #e1e1e1;
    z-index: 11;
  }
  .haokur-tab-bar{
    .toolbar-background{
      border:none;
    }
    .toolbar-content{
      padding:0;
      border:none;
    }
    .tab-bar-list{
      display: flex;
      .tab-bar-item{
        width:33.3%;
        text-align: center;
        padding:5px;
        img{
          height: 20px;
        }
        .static-icon{
          display: inline-block;
        }
        .active-icon{
          display: none;
        }
        p{
          margin-top: 4px;
          line-height: 16px;
          color:#666;
        }
      }
      .active{
        .static-icon{
          display: none;
        }
        .active-icon{
          display: inline-block;
        }
        p{
          color:#F65F47;
        }
      }
    }
  }

  ion-backdrop{
    z-index: 12;
  }
}